import React, { useState, useCallback } from 'react'

const App = () => {
  const [list, setList] = useState(['11', '22', '33'])

  const [todo, setTodo] = useState('')

  const handleChange = useCallback((evt) => {
    setTodo(evt.target.value)
  }, [])

  const handleAdd = useCallback(() => {
    if (todo.trim() === '') {
      return
    }
    setList([...list, todo])
    setTodo('')
  }, [list, todo])

  const handleDelete = useCallback(
    (index) => {
      const newList = [...list]
      newList.splice(index, 1)
      setList(newList)
    },
    [list]
  )

  return (
    <div>
      <h1>App</h1>
      <input
        type='text'
        value={todo}
        onChange={handleChange}
      />
      <button onClick={handleAdd}>Add</button>
      <ul>
        {list.map((item, index) => {
          return (
            <li key={item}>
              <span>{item}</span>
              <button onClick={() => handleDelete(index)}>del</button>
            </li>
          )
        })}
        {list.length === 0 && <li>暂无待办事项</li>}
      </ul>
    </div>
  )
}

export default App
